<template>
  <view class="group-list bg-white">
    <view class="item df fdr alc jc-sb border-bottom1" v-for="item in list" :key="item.id">
      <view class="df fdr alc">
        <image class="head" :src="item.member_headimg" mode=""></image>
        <view class="size28">
          <view class="lh40">{{ item.member_name }}</view>
          <view class="light-color font-24 lh-34"
            >还差 {{ item.people_limit }} 人，剩余
            <count-down :time="item.end_time" />
          </view>
        </view>
      </view>
      <view class="btn" @tap="jump('/views/goods/limit_list')">去拼团</view>
    </view>
  </view>
</template>

<script>
  import CountDown from '@/components/goods/CountDown.vue'
  export default {
    data() {
      return {}
    },
    components: {
      CountDown,
    },
    props: {
      list: {
        type: Array,
        default: () => [],
      },
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .group-list {
    padding: 0 30rpx;

    .item {
      width: 100%;
      height: 140rpx;
      background: rgba(255, 255, 255, 1);

      .head {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }

      /deep/ {
        .u-countdown-colon,
        .u-countdown-time {
          font-size: 12px !important;
          color: #999 !important;
        }
      }

      .btn {
        width: 128rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: var(--color);
        text-align: center;
        border: 1rpx solid var(--color);
        border-radius: 24rpx;
      }
    }
  }
</style>
